<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=1200" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>附加首页</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <link rel="stylesheet" href="./css/main.css">
</head>

<body>
  <header class="header">
    <!-- header-top -->
    <div class="header-top">
      <div class="wrap sbe">
        <p>
          <span>24小时服务热线：</span>
          <span>0539-9999999</span>
        </p>
        <ul>
          <li><a href="javascript:;">我的服务</a></li>
          <li><a href="javascript:;">客服中心</a></li>
          <li><a href="javascript:;">登录</a></li>
          <li><a href="javascript:;">注册</a></li>
        </ul>
      </div>
    </div>
    <!-- /header-top -->
    <div class="logo-nav wrap sbe">
      <div class="logo">
        <img src="./img/logo.png" alt="logo">
      </div>
      <nav class="nav">
        <a href="javascript:;">首页</a>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">项目规划</a>
        <a href="javascript:;">产品类型</a>
        <a href="javascript:;">陵园文化</a>
        <a href="javascript:;">VR视频</a>
        <a href="javascript:;">在线祭奠</a>
        <a href="javascript:;">会员中心</a>
      </nav>
    </div>
  </header>
  <!-- /header -->
  <!-- banenr -->
  <section class="banenr">
    <div class="layui-carousel" id="banner">
      <div carousel-item>
        <img src="./img/banner1.jpg" alt="banner1" />
        <img src="./img/banner2.jpg" alt="banner2" />
        <img src="./img/banner3.jpg" alt="banner3" />
        <img src="./img/banner4.jpg" alt="banner4" />
      </div>
    </div>
  </section>
  <!-- /banenr -->
  <!-- nav-item -->
  <ul class="nav-item wrap sbe">
    <li>
      <a href="javascript:;">
        <img src="./img/item_1.jpg" alt="item" />
      </a>
    </li>
    <li>
      <a href="javascript:;">
        <img src="./img/item_2.jpg" alt="item" />
      </a>
    </li>
    <li>
      <a href="javascript:;">
        <img src="./img/item_3.jpg" alt="item" />
      </a>
    </li>
  </ul>
  <!-- /nav-item -->
  <!-- index-list -->
  <section class="index-list wrap" style="margin-bottom: 50px;">
    <div class="title sbe">
      <p><img src="./img/culture.png" alt="文化"></p>
      <div class="more"><a href="javascript:;"><img src="./img/more.png" /></a></div>
    </div>
    <ul class="list-item">
      <a href="javascript:;">
        <div class="content">
          <h3>墓碑-墓地里的风景</h3>
          <p>生来独一无二，使亦与众不同</p>
        </div>
        <img src="./img/list-item.jpg" alt="我是标题">
      </a>
      <a href="javascript:;">
        <div class="content">
          <h3>墓碑-墓地里的风景</h3>
          <p>生来独一无二，使亦与众不同</p>
        </div>
        <img src="./img/list-item.jpg" alt="我是标题">
      </a>
      <a href="javascript:;">
        <div class="content">
          <h3>墓碑-墓地里的风景</h3>
          <p>生来独一无二，使亦与众不同</p>
        </div>
        <img src="./img/list-item.jpg" alt="我是标题">
      </a>
    </ul>
  </section>
  <footer class="footer">
    <div class="footer-content wrap">
      Copyright © 2017 临沂福寿陵园发展有限公司 All Rights Reserved.
    </div>
  </footer>
  <!-- /footer -->
  <!-- js -->
  <aside>
    <script src="./layui/layui.js"></script>
    <script>
      layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
          elem: '#banner',
          width: '100%', //设置容器宽度
          height: '480px',
        });
      });
    </script>
  </aside>
  <!-- js -->
</body>

</html>